<template>
  <div class="container" @click="handlecontainer">
    <div class="wrapper">
     <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in imgs" :key="index">
          <img class="swiper-img" :src="item" alt="">
        </div>
      </div>
         <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
     </div>
    </div>
  </div>
</template>

<script>
import Swiper, { Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
Swiper.use([Pagination])
export default {
  name: 'Gallary',
  props: {
    imgs: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      swiper: ''
    }
  },
  mounted () {
    this.initSwiper()
  },
  methods: {
    initSwiper () {
      this.swiper = new Swiper('.wrapper .swiper-container', {
        observeParents: true,
        observer: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      })
    },
    handlecontainer () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .container >>> .swiper-container
   overflow inherit
  .container
   display flex
   flex-direction column
   justify-content center
   position fixed
   top 0
   left 0
   bottom 0
   right 0
   background-color #000
   .wrapper
    height 0
    width 100%
    padding-bottom 77%
    background-color #fff
    .swiper-img
     width 100%
     height 5.8rem
    .swiper-pagination
     position absolute
     bottom -1rem
     color #fff
</style>
